<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>优田儿童成长中心</title>
    <link rel="stylesheet" href="/static/css/public.css" />
    <link rel="stylesheet" href="/static/css/signin.css" />
    <link href="/static/assets/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="/static/assets/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="/static/assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="/static/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/nixon.css" rel="stylesheet">
    <link href="/static/assets/lib/lobipanel/css/lobipanel.min.css" rel="stylesheet">
    <link href="/static/assets/css/style.css" rel="stylesheet">

    <script src="/static/js/jquery-1.11.0.js"></script>
    <style>
        .query{
            position: relative;
            top: -1px;
        }
        .query>button{
            width: 100px;
            height: 30px;
            background-color: rgba(0,255,0,0.5);
            color: white;
        }
        .query>button:hover{
            background-color: rgba(0,0,0,0.5);
        }
    </style>
</head>

<body>
<div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
    <div class="nano">
        <div class="nano-content">
            <ul>
                <li>
                    <a href="/home/"><i class="ti-bar-chart"></i> 统计数据</a>
                </li>
                <li class="active">
                    <a href="/teacher/"><i class="ti-user"></i> 教师管理<span class="sidebar-collapse-icon ti-angle-right"></span></a>
                </li>
                <li>
                    <a href="/child/"><i class="ti-user"></i> 幼儿管理</a>
                </li>
                <li>
                    <a href="/posts/"><i class="ti-desktop"></i> 岗位管理</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="header">
    <div class="pull-left">
        <div class="logo">
            <a>
                <img id="logoImg" src="/static/img/yt1.png" data-logo_big="/static/img/yt1.png" data-logo_small="/static/img/yt3.png" alt="Nixon" />
            </a>
        </div>
        <div class="hamburger sidebar-toggle">
            <span class="ti-menu"></span>
        </div>
    </div>
    <div class="pull-right p-r-15">
        <ul>
            <li class="header-icon dib">
                <img class="avatar-img" src="/static/assets/images/avatar/1.jpg" alt=""/> <span
                    class="user-avatar"><span th:text="${session.username}"></span>&nbsp;&nbsp;&nbsp;<i
                    class="ti-angle-down f-s-10"></i></span>
                <div class="drop-down dropdown-profile">
                    <div class="dropdown-content-body">
                        <ul>
                            <li><a href="/exit/"><i class="ti-power-off"></i> <span>注销</span></a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="content-wrap">
    <div class="main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <h1>教师签到管理</h1>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li>
                                    <a href="javascript:;" class="btn-link" style="font-size: 16px;" id="back">
                                        <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>返回
                                    </a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <div class="row">
                    <div class="card alert">
                        <div class="card-header">
                            <h3 id="teacher-name">教师姓名：</h3>
                            <input type="hidden" id="signflag" value="false" />
                            <input type="hidden" id="tid" th:value="${tid}" />
                            <hr/>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <span class="color-warning">今日签到状态: <span id="today-status"></span></span>
                            </div>
                            <div class="form-group">
                                <span class="color-danger" >累计签到总天数: <span class="badge badge-danger" id="total-sign">0</span></span>
                            </div>
                            <div class="form-group">
                                <span class="color-success">本月累计签到天数: <span class="badge badge-success" id="month-sign">0</span></span>
                            </div>
                            <hr/>
                            <div class="form-group">
                                <label>补签:</label>
                                <input class="form-control" type="date" id="rep_sign" style="width: 50%;display: inline-block"/>
                                <a href="javascript:;" class="btn btn-default" id="rep-btn">补签</a>
                            </div>
                            <div class="form-group">
                                <label>查询签到记录:</label>
                                <input class="form-control" type="date" id="query_date"/>
                            </div>
                            <div class="form-group">
                                <div class="top flex flex-align-end flex-pack-center flex-warp">
                                    <div class="out-1 flex flex-align-center flex-pack-center" id="signIn">
                                        <div class="out-2 flex flex-align-center flex-pack-center">
                                            <div class="signBtn">
                                                <strong id="sign-txt">签到</strong>
                                                <span>连续<em id="sign-count">0</em>天</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="sign-tip" class="tips" style="margin-top: 5px;"></div>
                                <div class="tips">
                                </div>
                                <div class="Calendar">
                                    <div id="toyear" class="flex flex-pack-center">
                                        <div id="idCalendarPre">&lt;</div>
                                        <div class="year-month">
                                            <span id="idCalendarYear">2018</span>年<span id="idCalendarMonth">6</span>月
                                        </div>
                                        <div id="idCalendarNext">&gt;</div>
                                    </div>
                                    <table border="1px" cellpadding="0" cellspacing="0">
                                        <thead>
                                        <tr class="tou">
                                            <td>日</td>
                                            <td>一</td>
                                            <td>二</td>
                                            <td>三</td>
                                            <td>四</td>
                                            <td>五</td>
                                            <td>六</td>
                                        </tr>
                                        </thead>
                                        <tbody id="idCalendar"></tbody>
                                    </table>
                                </div>
                                <script type="text/javascript" src="/static/js/rili.js"></script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            Copyright &copy; 2024
        </div>
    </div>
</div>
<script src="/static/assets/js/lib/jquery.min.js"></script>
<script src="/static/assets/js/lib/jquery.nanoscroller.min.js"></script>
<script src="/static/assets/js/lib/sidebar.js"></script>
<script src="/static/assets/js/lib/bootstrap.min.js"></script>
<script src="/static/assets/js/lib/mmc-common.js"></script>
<script src="/static/assets/js/lib/mmc-chat.js"></script>
<script src="/static/assets/js/lib/chart-js/Chart.bundle.js"></script>
<script src="/static/assets/js/lib/chart-js/chartjs-init.js"></script>
<script src="/static/assets/js/lib/datamap/d3.min.js"></script>
<script src="/static/assets/js/lib/datamap/topojson.js"></script>
<script src="/static/assets/js/lib/datamap/datamaps.world.min.js"></script>
<script src="/static/assets/js/lib/datamap/datamap-init.js"></script>
<script src="/static/assets/lib/lobipanel/js/lobipanel.js"></script>
<script src="/static/assets/js/scripts.js"></script>
<script>
    $(document).ready(function() {
        $('#lobipanel-custom-control').lobiPanel({
            reload: false,
            close: false,
            editTitle: false
        });
        $('#back').click(function () {
            location.href='/teacher/';
        });
    });
</script>
<script>
    $(function () {
        const tid = $("#tid").val();

        $.get("/api/v1/manager/teacherSign/info", { tid: tid }, function (res) {
            if (res.code === 200) {
                const data = res.data;

                $("h3#teacher-name").text(data.tname);

                // 今日签到状态
                if (data.flag) {
                    $("#today-status").html('<span class="badge badge-warning">已签到</span>');
                    $("#signflag").val("true");
                    $("#sign-tip").html('<span class="color-warning">今日已签到</span>');
                } else {
                    $("#today-status").html('<span class="badge badge-info">未签到</span>');
                    $("#signflag").val("false");
                }

                // 签到天数
                $("#total-sign").text(data.timelist.length);
                $("#month-sign").text(data.mlist.length);

                // 日历渲染
                const myday = data.timelist.map(date => new Date(date).getTime().toString().substring(0, 10));

                const cale = new Calendar("idCalendar", {
                    qdDay: myday,
                    onToday: function (o) {
                        o.className = "onToday";
                    },
                    onSignIn: function () {
                        $("#sign-txt").text('已签到');
                    },
                    onFinish: function () {
                        $("#sign-count").text(data.continuous);
                        $("#idCalendarYear").text(this.Year);
                        $("#idCalendarMonth").text(this.Month);
                    }
                });

                $("#idCalendarPre").click(function () {
                    cale.PreMonth();
                });

                $("#idCalendarNext").click(function () {
                    cale.NextMonth();
                });

                $("#signIn").click(function () {
                    if ($("#signflag").val() === "false") {
                        $.post('/api/v1/manager/teacherSign/sign_in', { tid: tid }, function (res) {
                            if (res.code === 200) {
                                alert("签到成功！");
                                location.reload();
                            } else {
                                alert(res.msg || "签到失败，请稍后再试！");
                            }
                        });
                    } else {
                        alert("今天已经签到了");
                    }
                });

                $("#rep-btn").click(function () {
                    const cont = $('#rep_sign').val();
                    if (!cont) {
                        alert("请选择补签日期");
                        return;
                    }

                    const today = new Date();
                    const selDate = new Date(cont);
                    if (selDate > today) {
                        alert("不能补签未来日期！");
                        return;
                    }

                    $.get('/api/v1/manager/teacherSign/checksign_t', { tid: tid, cont: cont }, function (data) {
                        if (data === '1') {
                            alert("该日期已签到，无需补签");
                        } else if (data === '') {
                            $.get('/api/v1/manager/teacherSign/rep_sign_t', { tid: tid, cont: cont }, function (res) {
                                if (res.code === 200) {
                                    alert("补签成功！");
                                    location.reload(); // 建议刷新当前页展示补签后的签到数据
                                } else {
                                    alert(res.message || "补签失败！");
                                }
                            });
                        } else {
                            alert("查询失败，请稍后再试！");
                        }
                    });
                });

                $("#query_date").change(function () {
                    const selectedDate = $(this).val();
                    if (!selectedDate) {
                        alert("请选择一个日期");
                        return;
                    }

                    $.get("/api/v1/manager/teacherSign/checksign_t", { tid: tid, cont: selectedDate }, function (res) {
                        if (res === "1") {
                            alert("当日已签到");
                        } else if (res === "") {
                            alert("当日未签到");
                        } else {
                            alert("查询失败，请稍后再试！");
                        }
                    });
                });

            } else {
                alert("加载签到数据失败：" + (res.message || "接口异常"));
            }
        });
    });
</script>
<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
    <h3>&copy; 版权所有 | </h3>
</div>
</body>

</html>